<template>
    <div class="menuManagement">
        <navigation-bar>
            <div class="searchContent">
                <div class="other">
                    <label>启用消息发送方式：</label>
                    <el-checkbox v-model="webInfo">Web系统消息</el-checkbox>
                    <el-checkbox v-model="appInfo">App系统消息</el-checkbox>
                    <el-checkbox v-model="emailInfo">邮件通知</el-checkbox>
                    <el-checkbox v-model="messageInfo">手机短信通知</el-checkbox>
                    <custom-button type="edit" style="margin-right: 10px; margin-left: 10px" @editClick="exportXls"></custom-button>
                    <custom-button type="custom" icon="el-icon-takeaway-box" @customClick="exportXls" title="保存"></custom-button>
                </div>
            </div>
        </navigation-bar>

        <el-table
            height="calc(100vh - 160px)"
            :data="tableData"
            style="width: 100%; margin: 10px 0"
            row-key="id"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        >
            <el-table-column prop="xxType" label="消息类型" width="200"> </el-table-column>
            <el-table-column prop="messageMb" label="消息模板"> </el-table-column>
            <el-table-column prop="mbExplain" label="模板说明"> </el-table-column>
            <el-table-column prop="messageType" label="消息级别">
                <template slot-scope="scope">
                    {{ getMessageType(scope.row.messageType) }}
                </template>
            </el-table-column>
            <el-table-column prop="messageLevel" label="告警级别">
                <template slot-scope="scope">
                    {{ getWarnLevel(scope.row.messageLevel) }}
                </template>
            </el-table-column>
            <el-table-column prop="roleSet" label="接收角色设置">
                <template slot-scope="scope">
                    <el-button type="default" size="mini" :disabled="scope.row.roleSet" @click="set(scope.row)">
                        <i class="el-icon-edit"></i>
                        设置
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div v-if="dialogShow">
            <custom-dialog title="角色设置" size="large" @dialogClose="dialogShow = false">
                <roleUserSelect roleId="1" @close="dialogShow = false"></roleUserSelect>
            </custom-dialog>
        </div>
    </div>
</template>

<script>
import navigationBar from '@/components/customComponents/managementCenter/navigationBar'
import customButton from '@/components/customComponents/customForm/customButton'
import {Utility} from '@/libs/utility'
import customDialog from '@/components/customComponents/customDialog'
import {warnSendList} from '@/mockData/systemManage.js'
import roleUserSelect from './components/roleUserSelect'
export default {
    name: 'menuManagement',
    components: {navigationBar, customButton, customDialog, roleUserSelect},
    data() {
        return {
            webInfo: false,
            appInfo: false,
            emailInfo: true,
            messageInfo: true,
            dialogShow: false,
            tableData: warnSendList,
            messageType: Utility.getDictList('messageType'),
            warnLevel: Utility.getDictList('warnLevel')
        }
    },
    computed: {},
    created() {},
    methods: {
        set(item) {
            console.log(item)
            this.dialogShow = true
        },
        getMessageType(type) {
            return this.messageType.find((t) => t.value == type).label
        },
        getWarnLevel(type) {
            return this.warnLevel.find((t) => t.value == type).label
        },
        dialogClose() {
            this.dialogShow = false
        },
        yinru() {
            this.dialogShow = true
        },
        // 分页点击事件
        pageChange(p) {
            console.log(p)
            // this.pageNo = p
            // this.initPage()
        },
        exportXls() {
            // let title = "出组期问诊配置"
            // AjaxCommonExcelDownload("/ccdc/cfg/expOutInquiry/exportXls?title=" + title).then(
            //     (response) => {
            //         const blob = new Blob([response.data], {
            //             type: "application/vnd.ms-excel"
            //         })
            //         const link = document.createElement("a")
            //         link.href = window.URL.createObjectURL(blob)
            //         link.download = title + ".xls"
            //         link.click()
            //     },
            //     (error) => {
            //         console.log(error.message)
            //     }
            // )
        }
    }
}
</script>

<style lang="scss" scoped>
.menuManagement {
    .other {
        justify-content: flex-end;
        display: flex;
    }
    .btnList {
        text-align: center;
        display: inline-block;
        margin-right: 10px;
        margin-top: 1px;
        float: right;
        .hover {
            border-color: #2680fa !important;
        }
        .btnItem {
            display: inline-block;
            height: 26px;
            width: 60px;
            margin-left: 10px;
            line-height: 26px;
            text-align: left;
            border: 1px solid #e0e0e0;
            border-radius: 4px;
            cursor: pointer;
            &:hover {
                border-color: #2680fa;
            }
            &:first-child {
                margin-left: 0 !important;
            }
            svg {
                margin-top: 2px;
                float: left;
                margin-left: 8px;
                margin-right: 3px;
            }
            label {
                font-size: 14px;
            }
        }
    }
}
</style>
